<template>
	<view class="container">
		<!-- 固定在顶部的导航 -->
		<view class="fixed-nav">
			<!-- 顶部导航 -->
			<view class="nav-header">
				<view class="nav-item" :class="{ active: currentTab === 'activity' }" @click="switchTab('activity')">活动
				</view>
				<view class="nav-item" :class="{ active: currentTab === 'venue' }" @click="switchTab('venue')">球场</view>
			</view>

			<!-- 运动分类 - 只在活动tab显示 -->
			<scroll-view v-if="currentTab === 'activity'" class="sport-categories" scroll-x="true"
				show-scrollbar="false">
				<!-- 添加推荐选项 -->
				<view class="sport-item recommend" :class="{ active: currentSport === 'recommend' }"
					@tap="changeSport('recommend')">
					推荐
				</view>
				<!-- 其他运动类型 -->
				<view v-for="(sport, index) in sportTypes" :key="index" class="sport-item"
					:class="{ active: currentSport === sport.dictValue }" @tap="changeSport(sport.dictValue)">
					{{ sport.dictLabel }}
				</view>
			</scroll-view>
		</view>

		<!-- 活动页面内容 -->
		<block v-if="currentTab === 'activity'">
			<!-- 占位元素，高度等于固定导航的高度 -->
			<view class="nav-placeholder" style="height: 180rpx;"></view>

			<!-- 日期选择 -->
			<scroll-view 
				class="date-scroll" 
				scroll-x="true" 
				show-scrollbar="false"
				:scroll-into-view="'date-' + selectedDate"
				:scroll-with-animation="true"
			>
				<view class="date-list">
					<view 
						v-for="(item, index) in dateList" 
						:key="index" 
						class="date-item"
						:id="'date-' + item.date"
						:class="{ active: selectedDate === item.date }" 
						@tap="selectDate(item)"
					>
						<text class="date-name">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 添加排序和地图模式选项 -->
			<view class="sort-options">
				<view class="sort-item" :class="{ active: sortType === 'default' }" @tap="changeSort('default')">
					综合排序
				</view>
				<view class="sort-item" :class="{ active: sortType === 'distance' }" @tap="changeSort('distance')">
					距我最近
				</view>
				<view class="map-mode" @tap="showActivityLocation">
					<image src="/static/icons/map.png"></image>
					<text>地图模式</text>
				</view>
			</view>

			<!-- 活动列表（添加下拉刷新） -->
			<scroll-view class="activity-list" scroll-y="true" refresher-enabled :refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh" @scrolltolower="loadMore">
				<view class="activity-wrapper" v-for="activity in activities" :key="activity.id">
					<activity-item :activity="activity">
					</activity-item>
					<view class="divider"></view>
				</view>

				<!-- 加载更多提示 -->
				<view class="loading-more" v-if="activities.length > 0">
					{{ hasMore ? '正在加载更多...' : '没有更多了' }}
				</view>

				<!-- 空状态 -->
				<view class="empty-activities" v-if="activities.length === 0">
					<text class="empty-text">暂无活动</text>
					<text class="empty-hint">快去布一个活动吧</text>
				</view>
			</scroll-view>
		</block>

		<!-- 球场页面内容 -->
		<block v-if="currentTab === 'venue'">
			<!-- 占位元素 - 球场模式下高度更小 -->
			<view class="nav-placeholder" style="height: 100rpx;"></view>

			<!-- 排序选项 -->
			<view class="sort-options">
				<view class="sort-item" :class="{ active: sortType === 'default' }" @tap="changeSort('default')">
					综合排序
				</view>
				<view class="sort-item" :class="{ active: sortType === 'distance' }" @tap="changeSort('distance')">
					距我最近
				</view>
				<view class="map-mode" @tap="showVenueLocation">
					<image src="/static/icons/map.png"></image>
					<text>地图模式</text>
				</view>
			</view>

			<!-- 球场列表 -->
			<view class="venue-list">
				<venue-item v-for="venue in sortedVenues" :key="venue.id" :venue="venue"></venue-item>
			</view>
		</block>

		<!-- 添加地图组件 -->
		<view class="map-container" v-if="showMap">
			<map id="activity-map" class="map" :latitude="mapCenter.latitude" :longitude="mapCenter.longitude"
				:markers="markers" :scale="12" show-location @markertap="onMarkerTap"></map>

			<!-- 回按钮 -->
			<view class="map-toolbar">
				<view class="back-btn" @tap="closeMap">
					<text class="icon">×</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listSportType,
		listActivity
	} from '@/api/youqiu/activity'
	import storage from '@/utils/storage'
	import ActivityItem from '@/components/activity-item/index.vue'
	import VenueItem from '@/components/venue-item/index.vue'
	import {
		getActivityList
	} from '@/api/youqiu/activity'
	import {
		listVenue
	} from '@/api/venue/venue.js'
	export default {
		components: {
			ActivityItem,
			VenueItem
		},
		data() {
			return {
				currentTab: 'activity',
				sortType: 'recommend',
				venues: [],
				activities: [],
				currentSport: 'recommend',
				currentDate: '',
				isRefreshing: false,
				sportTypes: [],
				feeTypeMap: {},
				sportTypeMap: new Map(), // 运动类型字典
				dateList: [],
				userLocation: {
					latitude: null,
					longitude: null
				}, // 初始化用户位置对象
				pageNum: 1,
				pageSize: 10,
				total: 0,
				isLoading: false,
				hasMore: true,
				showMap: false,
				mapCenter: {
					latitude: 39.908860,
					longitude: 116.397390
				},
				markers: [],
				selectedActivity: null,
				mapContext: null, // 添加地图上下文
				userInfo: {},
				query: {
					pageNum: 1,
					pageSize: 10
				},
				selectedDate: '', // 选中的日期
			}
		},
		computed: {
			sortedVenues() {
				if (this.sortType === 'distance') {
					// 按从小到大排序
					return [...this.venues].sort((a, b) => {
						return parseFloat(a.distance) - parseFloat(b.distance)
					})
				}
				// 默认排序返回原列表
				return this.venues
			},
		},
		watch: {
			activities: {
				handler(newVal) {
					console.log('Activities changed:', newVal)
				},
				deep: true
			},
			venues: {
				handler(newVal) {
					console.log('venues changed:', newVal)
				},
				deep: true
			}
		},
		async created() {
			// 先获取用户位置
			try {
				await this.getUserLocation()
			} catch (error) {
				console.log('获取位置失败，使用默认位置')
			}
			this.initDateList()
		},
		onLoad() {
			// 获取localstorage的用户信息
			const storage_data = uni.getStorageSync('storage_data')
			if (storage_data) {
				this.userInfo = storage_data.vuex_user_info
			}
			this.currentSport = 'recommend' // 默认选中推荐
			this.getUserLocation()
			this.getSportsType()
			//this.getActivityList()
			this.getActivityList()
			//this.initDictionaries()
		},
		onShow() {
			// 页面显示时刷新数据
			this.refreshData()
		},
		methods: {
			getVenueList(refresh = true) {
				if (refresh) {
					this.pageNum = 1
					this.venues = []
				}
				this.isLoading = true
				const query = this.getVenueQueryParams()
				listVenue(query).then(res => {
					console.log('listVenue', res)
					if (res.code === 200) {
						if (refresh) {
							this.venues = res.rows
						} else {
							this.venues = [...this.venues, ...res.rows]
						}
						this.total = res.total
						this.hasMore = this.venues.length < res.total
					}
				}).catch(err => {
					console.error('获取球场列表失败：', err)
					uni.showToast({
						title: '获取球场列表失败',
						icon: 'none'
					})
				}).finally(() => {
					this.isLoading = false
					this.isRefreshing = false
				})
			},
			getFeeTypeName(dictValue) {
				// 确保 dictValue 是字符串类型
				const key = String(dictValue)
				/* console.log('getFeeTypeName key:', key)
				console.log('feeTypeMap:', this.feeTypeMap) */

				// 直接从 Map 中获取
				const label = this.feeTypeMap.get(key)
				/* console.log('label:', label) */

				return label || '--'
			},
			getSportsType() {
				listSportType('sys_sport_type').then(res => {
					this.sportTypes = res.data
					// 建 sportTypeMap
					this.sportTypeMap = new Map(
						res.data.map(item => [String(item.dictValue), item.dictLabel])
					)
				})

				listSportType('sys_fee_type').then(res => {
					const feeTypes = res.data

					// 确保使用字符串作为键
					this.feeTypeMap = new Map(
						feeTypes.map(item => [String(item.dictValue), item.dictLabel])
					)
					/* console.log('feeTypeMap after init:', this.feeTypeMap) */
				})
			},
			async getActivityList(refresh = false) {
				if (refresh) {
					this.pageNum = 1
					this.activities = []
				}

				if (this.isLoading || (!refresh && !this.hasMore)) return

				this.isLoading = true
				const query = this.getQueryParams()

				try {
					const res = await listActivity(query)
					if (res.code === 200) {
						if (refresh) {
							this.activities = res.rows
						} else {
							this.activities = [...this.activities, ...res.rows]
						}
						this.total = res.total
						this.hasMore = this.activities.length < res.total
					}
				} catch (err) {
					console.error('获取活动列表失败：', err)
					uni.showToast({
						title: '获取活动列表失败',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
					this.isRefreshing = false
				}
			},
			switchTab(tab) {
				this.currentTab = tab
				console.log('switchTab', tab)
				if (tab === 'venue') {
					this.getVenueList()
				}
			},
			// 切换排序方式
			changeSort(type) {
				if (this.sortType === type) return
				this.sortType = type
				// 重置分页
				this.pageNum = 1
				this.hasMore = true
				
				if (this.currentTab === 'activity') {
					// 活动列表排序
					this.activities = []
					this.getActivityList()
				} else {
					// 球场列表排序
					this.getVenueList(true)
				}
			},
			// 格式化距离显示
			formatDistance(distance) {
				return `${distance}km`
			},
			// 关闭地图
			closeMap() {
				// 清除地图相关状态
				this.showMap = false
				this.markers = []
				this.mapCenter = {
					latitude: 39.908860,
					longitude: 116.397390
				}

				// 强制更新视图
				this.$nextTick(() => {
					// 可以在这里添加一些额外的清理工作
					console.log('地图已关闭')
				})
			},
			// 打开地图
			showActivityLocation() {
				if (!this.activities || this.activities.length === 0) {
					uni.showToast({
						title: '活动',
						icon: 'none'
					})
					return
				}

				// 获取所有有位置信息的活动
				const activitiesWithLocation = this.activities.filter(a => a.latitude && a.longitude)

				if (activitiesWithLocation.length === 0) {
					uni.showToast({
						title: '暂无位置信息',
						icon: 'none'
					})
					return
				}

				// 获取用户当前位置作为地图中心点
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.mapCenter = {
							latitude: res.latitude,
							longitude: res.longitude
						}

						// 建所有活动的标记点
						this.markers = activitiesWithLocation.map((activity, index) => ({
							id: index,
							latitude: parseFloat(activity.latitude),
							longitude: parseFloat(activity.longitude),
							title: activity.title,
							iconPath: '/static/icons/marker.png',
							width: 32,
							height: 32,
							callout: {
								content: activity.title,
								color: '#000000',
								fontSize: 14,
								borderRadius: 4,
								padding: 8,
								display: 'ALWAYS'
							}
						}))

						// 最后再显示地图
						setTimeout(() => {
							this.showMap = true
						}, 100)
					},
					fail: (err) => {
						console.error('获取位置失败:', err)
						uni.showToast({
							title: '获取位置失败',
							icon: 'none'
						})
					}
				})
			},
			// 标记点点击事件
			onMarkerTap(e) {
				const markerId = e.markerId
				const activity = this.activities[markerId]
				if (activity) {
					uni.navigateTo({
						url: `/pages/activity/detail?id=${activity.id}`
					})
				}
			},
			// 初始化日期列表
			initDateList() {
				const dateList = []
				const today = new Date()
				
				// 添加前7天
				for (let i = 7; i > 0; i--) {
					const date = new Date()
					date.setDate(today.getDate() - i)
					let name = this.getDateLabel(date)
					dateList.push({
						name: name,
						date: this.formatDate(date)
					})
				}
				
				// 添加今天
				const todayFormatted = this.formatDate(today)
				dateList.push({
					name: '今天',
					date: todayFormatted
				})
				
				// 添加后7天
				for (let i = 1; i <= 7; i++) {
					const date = new Date()
					date.setDate(today.getDate() + i)
					let name = i === 1 ? '明天' : this.getDateLabel(date)
					dateList.push({
						name: name,
						date: this.formatDate(date)
					})
				}
				
				this.dateList = dateList
				this.selectedDate = todayFormatted // 默认选中今天
				
				// 等待DOM更新后滚动到选中日期
				this.$nextTick(() => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this)
						query.select('#date-' + todayFormatted).boundingClientRect()
						query.select('.date-scroll').boundingClientRect()
						query.exec(([dateItem, scrollView]) => {
							if (dateItem && scrollView) {
								const scrollLeft = dateItem.left - scrollView.width / 2 + dateItem.width / 2
								this.$nextTick(() => {
									uni.pageScrollTo({
										scrollLeft,
										duration: 0
									})
								})
							}
						})
					}, 100)
				})
				
				// 初始化时加载今天的数据
				this.selectDate({ date: todayFormatted })
			},
			// 获取日期显示标签
			getDateLabel(date) {
				const today = new Date()
				const tomorrow = new Date(today)
				tomorrow.setDate(today.getDate() + 1)
				
				// 返回 "MM月DD日 周X" 格式
				const month = date.getMonth() + 1
				const day = date.getDate()
				const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]
				return `${month}月${day}日 ${weekDay}`
			},
			// 格式化��期为 yyyy-MM-dd
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			// 切换运动类型
			changeSport(type) {
				if (this.currentSport === type) return

				this.currentSport = type
				this.pageNum = 1
				this.activities = []
				this.hasMore = true

				const query = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					sportType: type === 'recommend' ? null : type,
					activityTime: this.currentDate || null
				}

				listActivity(query).then(res => {
					if (res.code === 200) {
						this.activities = res.rows
						this.total = res.total
						this.hasMore = this.activities.length < res.total
					}
				}).catch(err => {
					console.error('获取活动列表失败：', err)
					uni.showToast({
						title: '获取活动列表失败',
						icon: 'none'
					})
				}).finally(() => {
					this.isLoading = false
					this.isRefreshing = false
				})
			},
			// 获取球场查询参数
			getVenueQueryParams() {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					sortType: this.sortType, // 添加排序类型
				}

				// 如果是距离排序，添加用户位置信息
				//if (this.sortType === 'distance' && this.userLocation) {
				params.userLat = this.userLocation.latitude
				params.userLng = this.userLocation.longitude
				//}

				return params
			},
			// 获取活动查询参数
			getQueryParams() {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					sportType: this.currentSport === 'recommend' ? null : this.currentSport,
					userLat: this.userLocation?.latitude || null,
					userLng: this.userLocation?.longitude || null,
					activityTime: this.selectedDate || null,
					sortType: this.sortType // 添加排序参数
				}

				// 如果是距离排序，添加用户位置信息
				//if (this.sortType === 'distance' && this.userLocation) {
				params.userLat = this.userLocation.latitude
				params.userLng = this.userLocation.longitude
				//}

				return params
			},
			// 切换日期
			changeDate(date) {
				this.currentDate = date
				this.getActivityList(true)
			},
			// 下拉刷新
			async onRefresh() {
				await this.refreshData()
				// 停止下拉刷新
				this.isRefreshing = false
			},
			// 加载更多
			loadMore() {
				if (!this.hasMore || this.isLoading) return
				this.pageNum++
				this.getActivityList()
			},
			goToActivityDetail(activity) {
				uni.navigateTo({
					url: `/pages/activity/register?id=${activity.id}`,
					fail: (err) => {
						console.error('页面跳转失败:', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				})
			},
			// 获取用户位置
			getUserLocation() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							this.userLocation = {
								latitude: res.latitude,
								longitude: res.longitude
							}
							resolve(res)
						},
						fail: (err) => {
							console.error('获取位置失败：', err)
							reject(err)
						}
					})
				})
			},

			// 初始化地图
			initMap() {
				this.mapContext = uni.createMapContext('map')
				// 设置地图中心点用户位置
				this.mapContext.moveToLocation({
					latitude: this.userLocation.latitude,
					longitude: this.userLocation.longitude
				})
			},

			// 计算两点之间的距离
			calculateDistance(lat2, lon2) {
				// 检查参数是否有效
				if (!lat2 || !lon2 || !this.userLocation) {
					return '--'
				}

				try {
					const lat1 = this.userLocation.latitude
					const lon1 = this.userLocation.longitude

					// 确保所有参数都是数字
					const latitude1 = parseFloat(lat1)
					const longitude1 = parseFloat(lon1)
					const latitude2 = parseFloat(lat2)
					const longitude2 = parseFloat(lon2)

					// 检查转换后的值是否有效
					if (isNaN(latitude1) || isNaN(longitude1) || isNaN(latitude2) || isNaN(longitude2)) {
						return '--'
					}

					const R = 6371 // 地球半径，单位km
					const dLat = this.deg2rad(latitude2 - latitude1)
					const dLon = this.deg2rad(longitude2 - longitude1)

					const a =
						Math.sin(dLat / 2) * Math.sin(dLat / 2) +
						Math.cos(this.deg2rad(latitude1)) * Math.cos(this.deg2rad(latitude2)) *
						Math.sin(dLon / 2) * Math.sin(dLon / 2)

					const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
					const distance = R * c

					// 回保留一位小数的距离
					return distance.toFixed(1)
				} catch (error) {
					console.error('计算距离出错：', error)
					return '--'
				}
			},

			deg2rad(deg) {
				return deg * (Math.PI / 180)
			},
			// 将计算属性改为方法
			getSportTypeName(type) {
				return this.sportTypeMap.get(type) || type
			},
			goToProfile(activity) {
				console.log('goToProfile', activity)
				uni.navigateTo({
					url: `/pages/profile/detail?userId=${activity.sysUser.userId}`
				})
			},
			goToTeamProfile(activity) {
				console.log('goToTeamProfile', activity)
				if (!activity.teamId) {
					uni.showToast({
						title: '球队信息不存在',
						icon: 'none'
					});
					return;
				}
				console.log('activity.sysUser.userId', activity.sysUser.userId)
				console.log('this.userInfo.userId', this.userInfo.userId)
				// 断是否是自己创建的球队
				if (activity.sysUser.userId === this.userInfo.userId) {
					uni.navigateTo({
						url: `/pages/team/my-detail/index?teamId=${activity.teamId}`,
						fail: (err) => {
							console.error('跳转球队主页失败:', err);
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.navigateTo({
						url: `/pages/team/detail?teamId=${activity.teamId}`,
						fail: (err) => {
							console.error('跳转球队主页失败:', err);
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
						}
					});
				}
			},
			// 刷新数据
			refreshData() {
				// 重置页码
				this.query.pageNum = 1
				// 清空活动列表
				this.activities = []
				// 重置加载更多状态
				this.hasMore = true
				// 重新加载数据
				this.getActivityList()
			},
			// 显示球场地图
			showVenueLocation() {
				// 设置地图中心点为第一个球场的位置或默认位置
				this.mapCenter = this.venues.length > 0 ? {
					latitude: this.venues[0].latitude,
					longitude: this.venues[0].longitude
				} : {
					latitude: this.userLocation?.latitude || 39.908860,
					longitude: this.userLocation?.longitude || 116.397390
				}

				// 生成地图标记点
				this.markers = this.venues.map((venue, index) => ({
					id: venue.id,
					latitude: venue.latitude,
					longitude: venue.longitude,
					title: venue.name,
					iconPath: '/static/icons/marker.png', // 需要准备一个标记图标
					width: 32,
					height: 32,
					callout: {
						content: venue.name,
						color: '#333333',
						fontSize: 14,
						borderRadius: 4,
						bgColor: '#ffffff',
						padding: 8,
						display: 'ALWAYS'
					}
				}))

				this.showMap = true
			},
			// 点击地图标记点
			onMarkerTap(e) {
				const markerId = e.detail.markerId
				const venue = this.venues.find(v => v.id === markerId)
				if (venue) {
					uni.navigateTo({
						url: `/pages/venue/detail?id=${venue.id}`
					})
				}
			},
			// 关闭地图
			closeMap() {
				this.showMap = false
			},
			// 选择日期
			async selectDate(item) {
				this.selectedDate = item.date
				// 重新加载该日期的活动数据
				this.pageNum = 1
				this.activities = []
				this.hasMore = true
				
				// 如果没有位置信息，先尝试获取
				if (!this.userLocation.latitude) {
					try {
						await this.getUserLocation()
					} catch (error) {
						console.log('获取位置失败，继续加载活动')
					}
				}
				this.getActivityList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.fixed-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.nav-header {
		padding: 20rpx 30rpx 10rpx;
		display: flex;
		justify-content: flex-start;
		border-bottom: 1rpx solid #eee;
		background: #fff;

		.nav-item {
			margin-right: 60rpx;
			font-size: 32rpx;
			color: #666;
			position: relative;
			padding-bottom: 10rpx;

			&.active {
				color: #4CAF50;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #4CAF50;
				}
			}
		}
	}

	.sort-options {
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		align-items: center;
	}

	.sort-item {
		margin-right: 40rpx;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}

	.sort-item.active {
		color: #ff6b35;
		font-weight: bold;
	}

	.sort-item.active::after {
		content: '';
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #ff6b35;
	}

	.map-mode {
		margin-left: auto;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}

	.map-mode image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.venue-list {
		padding: 20rpx;
	}

	.venue-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.venue-image {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
	}

	.venue-info {
		padding: 0 10rpx;
	}

	.venue-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
	}

	.venue-location {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.venue-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		font-size: 24rpx;
		color: #ff6b35;
		background-color: #fff5f0;
		padding: 4rpx 16rpx;
		border-radius: 4rpx;
		margin-right: 16rpx;
		margin-bottom: 8rpx;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.tab-item.active {
		color: #ff6b35;
	}

	.tab-item image {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 4rpx;
	}

	/* 样式 */
	.activity-list {
		padding: 20rpx 30rpx;
		height: calc(100vh - 340rpx);
	}

	.activity-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.activity-item-active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.activity-header {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.activity-info {
		background: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.03);
	}

	.activity-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
	}

	.distance-info {
		font-size: 24rpx;
		color: #ff6b35;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		background: #fff5f0;
		box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.1);
	}

	.activity-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.team-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.user-meta {
		display: flex;
		align-items: center;
	}

	.user-name {
		font-size: 24rpx;
		color: #666;
	}

	.activity-time {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
		position: relative;
		padding-left: 20rpx;
	}

	.activity-time::before {
		content: '';
		position: absolute;
		left: 8rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 4rpx;
		height: 4rpx;
		background: #999;
		border-radius: 50%;
	}

	.activity-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.activity-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	.activity-status {
		font-size: 24rpx;
		color: #999;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		background: #f5f5f5;
	}

	.status-active {
		color: #ff6b35;
		background: #fff5f0;
	}

	.activity-info {
		background: #f8f8f8;
		border-radius: 8rpx;
		padding: 20rpx 30rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 10rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-item .label {
		width: 109rpx;
		font-size: 26rpx;
		color: #666;
	}

	.info-item .value {
		flex: 1;
		font-size: 26rpx;
		color: #333;
	}

	/* 空状态样式 */
	.empty-activities {
		padding: 60rpx 0;
		text-align: center;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 20rpx;
		display: block;
	}

	.empty-hint {
		font-size: 28rpx;
		color: #666;
	}

	/* 新增样式 */
	.sport-categories {
		white-space: nowrap;
		background-color: #fff;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;

		.sport-item {
			display: inline-block;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: #666;

			&.active {
				color: #4CAF50;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 30rpx;
					height: 4rpx;
					background-color: #4CAF50;
				}
			}
		}
	}

	.date-scroll {
		background: #fff;
		white-space: nowrap;
		padding: 20rpx 0;
		
		.date-list {
			display: inline-flex;
			padding: 0 30rpx;
			
			.date-item {
				padding: 0 20rpx;
				min-width: 140rpx;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				position: relative;
				
				&.active {
					color: #07c160;
					font-weight: bold;
					
					&::after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: -6rpx;
						transform: translateX(-50%);
						width: 20rpx;
						height: 4rpx;
						background: #07c160;
						border-radius: 2rpx;
					}
				}
				
				.date-name {
					display: block;
					white-space: nowrap;
				}
			}
		}
	}

	.loading-more {
		text-align: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #999;
	}

	.map-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: #fff;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.map-toolbar {
		position: fixed;
		top: 80rpx;
		left: 30rpx;
		z-index: 1000;
	}

	.back-btn {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.back-btn .icon {
		font-size: 48rpx;
		color: #333;
	}

	.team-name-secondary {
		font-size: 32rpx;
		/* 加大字体 */
		color: #4CAF50;
		/* 使用绿色 */
		font-weight: bold;
		/* 加粗 */
		background-color: #f0f9f0;
		/* 加浅绿色背景 */
		padding: 10rpx 20rpx;
		/* 添加内边距 */
		border-radius: 8rpx;
		/* 圆角 */
		display: inline-block;
		/* 使padding生效 */
	}

	.activity-list .activity-wrapper {
		position: relative;
		transform: rotate(-5rpx);
		border-radius: 20rpx solid;
	}

	.activity-list .divider {
		height: 1rpx;
		background-color: #eee;
		margin: 0 30rpx;
	}

	.map-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: #fff;

		.map {
			width: 100%;
			height: 100%;
		}

		.map-toolbar {
			position: fixed;
			top: 80rpx;
			right: 30rpx;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.back-btn,
			.location-btn {
				width: 80rpx;
				height: 80rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

				.icon {
					font-size: 48rpx;
					color: #333;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.filter-section {
		.date-scroll {
			.date-item {
				&.selected {
					color: #07c160;
					font-weight: bold;
					position: relative;
					
					&::after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: -6rpx;
						transform: translateX(-50%);
						width: 20rpx;
						height: 4rpx;
						background: #07c160;
						border-radius: 2rpx;
					}
				}
			}
		}
	}
</style>